<template>
  <div class="bottom-nav">
    <el-row>
      <el-col :span="6" @click="$router.push('/')" :class="{ active: currentPath === '/' }">
        <el-icon><House /></el-icon>
        <div>首页</div>
      </el-col>
      <el-col :span="6" @click="$router.push('/cart')" :class="{ active: currentPath === '/cart' }">
        <el-icon><ShoppingCart /></el-icon>
        <div>点单</div>
      </el-col>
      <el-col :span="6" @click="$router.push('/orders')" :class="{ active: currentPath === '/orders' }">
        <el-icon><List /></el-icon>
        <div>订单</div>
      </el-col>
      <el-col :span="6" @click="$router.push('/me')" :class="{ active: currentPath === '/me' }">
        <el-icon><User /></el-icon>
        <div>我</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { House, ShoppingCart, List, User } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const currentPath = computed(() => route.path)
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.304);
}

.el-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
}

.el-col:hover {
  color: #ff6b6b;
}

.el-col.active {
  color: #ff6b6b;
}

.el-icon {
  font-size: 20px;
  margin-bottom: 2px;
}
</style>